<template>
  <div class="payment-plan">
    <van-nav-bar
      title="还款计划"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="content">
      <!-- 贷款信息 -->
      <van-cell-group inset title="贷款信息">
        <van-cell title="城市" :value="loanStore.cityName" />
        <van-cell title="贷款类型" :value="loanTypeText" />
        <van-cell title="贷款利率" :value="`${loanStore.rate}%`" />
      </van-cell-group>

      <!-- 还款概览 -->
      <van-cell-group inset title="还款概览" class="mt-3">
        <van-cell title="月供" :value="`${monthlyPayment}元`" />
        <van-cell title="总还款" :value="`${totalPayment}元`" />
        <van-cell title="支付利息" :value="`${totalInterest}元`" />
      </van-cell-group>

      <!-- 还款明细 -->
      <van-cell-group inset title="还款明细" class="payment-details">
        <van-cell v-for="(item, index) in paymentDetails" :key="index">
          <template #title>
            <div>第{{ index + 1 }}期</div>
            <div class="payment-item">
              <span>月供：{{ item.monthlyPayment }}元</span>
              <span>本金：{{ item.principal }}元</span>
              <span>利息：{{ item.interest }}元</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useLoanStore } from '@/stores/loan'

const router = useRouter()
const loanStore = useLoanStore()

// 模拟数据
const monthlyPayment = ref('6,000.00')
const totalPayment = ref('2,160,000.00')
const totalInterest = ref('560,000.00')
const paymentDetails = ref([
  { monthlyPayment: '6,000.00', principal: '4,500.00', interest: '1,500.00' },
  { monthlyPayment: '6,000.00', principal: '4,520.00', interest: '1,480.00' },
  // ... 更多数据
])

const onClickLeft = () => {
  router.back()
}

const loanTypeText = computed(() => {
  switch (loanStore.loanType) {
    case 'commercial': return '商业贷款'
    case 'fund': return '公积金贷款'
    case 'combination': return '组合贷款'
    default: return ''
  }
})
</script>

<style lang="scss" scoped>
@use "@/assets/styles/index.scss" as *;

.payment-plan {
  height: 100%;
  background-color: $background-color;

  .content {
    padding: 16px;
  }

  .payment-details {
    margin-top: 16px;
  }

  .payment-item {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
  }
}
</style> 